<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>小艾爱跑 | 团队实时成绩打印</title>
<link rel="stylesheet" href="http://static-paobuqu-com.oss-cn-hangzhou.aliyuncs.com/css%2Fbootstrap.min.css">
<link rel="shortcut icon" type="image/ico" href="web/favicon.ico">

<style type="text/css">
    
    body,td,th {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;color: #1d1007; line-height:24px}

    h2 {
        margin-top: 28px;
        margin-bottom: 0px;
    }

    table{
        border-collapse: collapse;
        width: 100%;
        text-align: center;
    }
    td{
        border:1px solid #000;
        padding: 2px;
    }


</style>

</head>
<body>
    <div class="container">
        <h2>
            <span id="race_name"></span>
            <span id="course_name"></span>
            <span id="sex"></span>
            <span>成绩</span>
            <span id="rank_range"></span>
            <br>        
        </h2>
        <div id="table"></div>
        <div style="float: right">
            <br>
            裁判长签字：________________
            <br>
            日期：
            <span id="date"></span>
            <br>
            <br>
            <br>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    //获取数据信息
    var obj = JSON.parse(localStorage.getItem('realtimeDataForPrint'));
    console.log(obj);

    //表格信息
    var realtimeData = obj.realtimeData;

    //性别显示
    if (obj.sex == 'male') {
        //男
        document.getElementById('sex').innerHTML += '男子团体';
    } else if (obj.sex == 'female') {
        //女
        document.getElementById('sex').innerHTML += '女子团体';
    } else if (obj.sex == '"mixed"') {
        // 混合
        document.getElementById('sex').innerHTML += '混合团体';
    }

    //日期
    var myDate = new Date(); 
    document.getElementById('date').innerHTML = myDate.getFullYear() + '/' + (myDate.getMonth() + 1) + '/' + myDate.getDate();

    //比赛名称
    document.getElementById('race_name').innerHTML = obj.race_name;
    //科目名称
    document.getElementById('course_name').innerHTML += obj.course_name;


    var rank_i = 1;
    var rank_j;

    createTable();

    function createTable() {

        var div = document.getElementById("table"); 
        //创建table
        var table = document.createElement("table");

        //个人，单程，定距
        if (obj.type == 'oneway') {

        } else if (obj.type == 'circle') {

            //计算排名范围
            rank_i = realtimeData[0].seq;
            rank_j = rank_i - 1;

            //个人绕圈定距
            //title
            //创建一行
            var row = table.insertRow();
            var cell = row.insertCell();
            cell.innerHTML='团队名称';
            cell = row.insertCell();
            cell.innerHTML='团体性别';
            cell = row.insertCell();
            cell.innerHTML='已完成圈数';
            cell = row.insertCell();
            cell.innerHTML='总成绩';
            cell = row.insertCell();
            cell.innerHTML='排名';
            realtimeData.forEach(function(element){

                // 创建一行
                var row = table.insertRow();
                // ["team_name","团队名称"]
                var cell = row.insertCell();
                cell.innerHTML=element.team_name;
                // ["team_gender","团体性别"]
                cell = row.insertCell();
                cell.innerHTML=getGender(element.team_gender);
                // ["nums","已完成圈数"]
                cell = row.insertCell();
                cell.innerHTML = element.nums;
                // ["score","总成绩"]
                cell = row.insertCell();
                cell.innerHTML = element.score;
                // ["seq","排名"]
                cell = row.insertCell();
                cell.innerHTML = element.seq;

                rank_j++;
            });

            //存在排名的情况下
            if (rank_i != '-') {
                document.getElementById('rank_range').innerHTML += '第' + rank_i + '名至第' + rank_j + '名';
            }
        }
        div.appendChild(table); 

    }

    function getGender(gender) {
        if (gender = 'female') {
            return '男子';
        } else if (gender = 'male') {
            return  '女子';
        } else if (gender = 'mixed') {
            return '混合';
        } else {
            return '未知'
        }
    }
</script> 